<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./arr.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        form {
            display: flex;
            flex-direction: row;
            justify-content: space-evenly;
            padding: 0 100px
        }

        .box {
            width: 1200px;
            margin: 30px auto;

            /* height: 300px; */
            /* background-color: #b88e8e; */

        }

        .box li {
            height: 30px;
            border-bottom: 1px solid #ccc;
            position: relative;
            text-align: center;
            margin-top: 10px;
        }

        .lname {
            position: absolute;
            left: 10px;
            width: 100px;
            /* background-color: red; */
        }

        .lsex {
            position: absolute;
            left: 150px;
            width: 100px;
            /* background-color: red; */
        }

        .lage {
            position: absolute;
            left: 300px;
            width: 100px;
            /* background-color: red; */
        }

        .ldis {
            position: absolute;
            left: 450px;
            width: 240px;
            /* background-color: red; */
        }

        .lphone {
            position: absolute;
            left: 750px;
            width: 240px;
            /* background-color: red; */
        }

        .lfenzu {
            position: absolute;
            left: 1050px;
            width: 100px;
            /* background-color: red; */
        }
        .tit{
            width: 400px;
            height: 50px;
            margin-top: 30px ;
            margin-left: 200px;
            font-size: 38px;
            text-align: center;
            line-height: 30px;
            vertical-align: middle;
            color: red;
        }
    </style>
</head>

<body>
    <form action="">
        <div><span>姓名：</span><input class="name" type="text"></div>
        <div><span>手机号：</span><input class="phone" type="text"></div>
        <div><span>年龄：</span><input class="age" type="text"></div>
        <div><span>描述：</span><input class="dis" type="text"></div>
        <div><span>性别：</span><select class="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select></div>
        <div><span>组号：</span><select class="fenzu">
                <option value="第一组">第一组</option>
                <option value="第二组">第二组</option>
                <option value="第三组">第三组</option>
                <option value="第四组">第四组</option>
                <option value="第五组">第五组</option>
                <option value="第六组">第六组</option>
            </select></div>
    </form>
    <ul class="box"></ul>
    
    <script>
        let box = document.querySelector('.box')
        // let name1 = $('.name').val();
        // let phone = $('.phone').val();
        // let age = $('.age').val();
        // let dis = $('.dis').val();
        // let sex = $('.sex').val();
        // let fenzu = $('.fenzu').val();
        function selectPerson(name, phone, age, dis, sex, fenzu) {
            function write(i) {
                $('.box').append(`<li>
                                        <div class="lname">${data[i].name}</div>
                                        <div class="lsex">${data[i].sex}</div>
                                        <div class="lage">${data[i].age}</div>
                                        <div class="ldis">${data[i].dis}</div>
                                        <div class="lphone">${data[i].phone}</div>
                                        <div class="lfenzu">${data[i].fenzu}</div>
                                    </li>`);
            }
            $('.box').html(` <li class="title">
                                <div class="lname">姓名</div>
                                <div class="lsex">性别</div>
                                <div class="lage">年龄</div>
                                <div class="ldis">描述</div>
                                <div class="lphone">手机号</div>
                                <div class="lfenzu">分组</div>
                            </li>`)
            for (let i = 0; i < data.length; i++) {
                if (data[i].fenzu == fenzu && data[i].sex == sex && name == '' && age == '' && dis == '' && phone == '') {
                    write(i)
                } else if (data[i].name != '' && data[i].name == name && data[i].fenzu == fenzu && data[i].sex && age == '' && dis == '' && phone == '') {
                    write(i)
                } else if (data[i].age != '' && data[i].age == age && data[i].fenzu == fenzu && data[i].sex && name == '' && dis == '' && phone == '') {
                    write(i)
                } else if (data[i].dis != '' && data[i].dis == dis && data[i].fenzu == fenzu && data[i].sex && age == '' && name == '' && phone == '') {
                    write(i)
                } else if (data[i].phone != '' && data[i].phone == phone && data[i].fenzu == fenzu && data[i].sex && age == '' && dis == '' && name == '') {
                    write(i)
                } else if (data[i].fenzu == fenzu && data[i].phone == phone && data[i].sex == sex && data[i].name == name && data[i].age == age && data[i].dis == dis) {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].name == name && data[i].phone == phone && age == '' && dis == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].name == name && data[i].age == age && dis == '' && phone == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].name == name && data[i].dis == dis && age == '' && phone == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].phone == phone && data[i].age == age && name == '' && dis == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].phone == phone && data[i].dis == dis && name == '' && age == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].age == age && data[i].dis == dis && name == '' && phone == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].name == name && data[i].phone == phone && data[i].age == age && dis == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].name == name && data[i].phone == phone && data[i].dis == dis && age == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].age == age && data[i].phone == phone && data[i].dis == dis && name == '') {
                    write(i)
                } else if ((data[i].fenzu == fenzu && data[i].sex == sex) && data[i].name == name && data[i].age == age && data[i].dis == dis && phone == '') {
                    write(i)
                }
                //data[i].fenzu == fenzu&&data[i].phone == phone&&data[i].sex == sex && data[i].name == name && data[i].age == age&&data[i].dis == dis
            }
        }
        window.onload = function () {
            selectPerson($('.name').val(), $('.phone').val(), $('.age').val(), $('.dis').val(), $('.sex').val(), $('.fenzu').val())
        }
        $('input').on('change', function () {
            selectPerson($('.name').val(), $('.phone').val(), $('.age').val(), $('.dis').val(), $('.sex').val(), $('.fenzu').val())
            if($('.box').children().length == 1){
                $('.box').append('<div class="tit">该人员不存在!!!!</div>')
            }
        })
        $('select').on('change', function () {
            selectPerson($('.name').val(), $('.phone').val(), $('.age').val(), $('.dis').val(), $('.sex').val(), $('.fenzu').val())
            if($('.box').children().length == 1){
                $('.box').append('<div class="tit">该人员不存在!!!!</div>')
            }
        })
    </script>
</body>

</html>